<!-- 商家列表组件 -->
<template>
  <view class="section">
    <view class="section-header">
      <text class="section-title">合作商家</text>
      <view class="section-more" @tap="$emit('more')">
        <text class="more-text">查看全部</text>
        <uni-icons type="arrowright" size="14" color="#999"></uni-icons>
      </view>
    </view>
    <view class="merchant-list">
      <view 
        class="merchant-item" 
        v-for="merchant in merchants" 
        :key="merchant.id"
        @tap="$emit('select', merchant)"
      >
        <image :src="merchant.logo" mode="aspectFill" class="merchant-logo"></image>
        <view class="merchant-info">
          <text class="merchant-name">{{ merchant.name }}</text>
          <view class="merchant-tags">
            <text class="merchant-tag" v-for="(tag, i) in merchant.tags" :key="i">
              {{ tag }}
            </text>
          </view>
          <view class="merchant-stats">
            <view class="stat-item">
              <uni-icons type="star-filled" size="14" color="#FFD700"></uni-icons>
              <text class="stat-text">{{ merchant.rating }}</text>
            </view>
            <text class="stat-divider">|</text>
            <text class="stat-text">月售{{ merchant.sales }}单</text>
            <text class="stat-divider">|</text>
            <text class="stat-text">{{ merchant.distance }}km</text>
          </view>
          <view class="merchant-delivery">
            <text class="delivery-text">起送¥{{ merchant.minPrice }}</text>
            <text class="delivery-fee">配送费¥{{ merchant.deliveryFee }}</text>
          </view>
        </view>
        <image 
          :src="merchant.coverImage" 
          mode="aspectFill" 
          class="merchant-cover"
        ></image>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { Merchant } from '../types';

interface Props {
  merchants: Merchant[];
}

defineProps<Props>();
defineEmits(['select', 'more']);
</script>

<style scoped>
.section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.section-more {
  display: flex;
  align-items: center;
  gap: 5rpx;
}

.more-text {
  font-size: 26rpx;
  color: #999;
}

.merchant-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.merchant-item {
  display: flex;
  background-color: #f8f8f8;
  border-radius: 16rpx;
  padding: 20rpx;
  gap: 20rpx;
}

.merchant-logo {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
}

.merchant-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.merchant-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.merchant-tags {
  display: flex;
  gap: 10rpx;
}

.merchant-tag {
  font-size: 22rpx;
  color: #00C853;
  background-color: #e6f7ed;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
}

.merchant-stats {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5rpx;
}

.stat-text {
  font-size: 24rpx;
  color: #666;
}

.stat-divider {
  color: #ddd;
  font-size: 24rpx;
}

.merchant-delivery {
  display: flex;
  gap: 20rpx;
}

.delivery-text,
.delivery-fee {
  font-size: 24rpx;
  color: #999;
}

.merchant-cover {
  width: 160rpx;
  height: 120rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
}
</style>